// 注册的表单界面

import React, { useEffect, useState } from 'react';
import { Form, Input, Select, Button, Modal, message } from 'antd';
import { UserOutlined, LockOutlined, MailOutlined, PhoneOutlined } from '@ant-design/icons';
import { ModalForm, ProFormItem, ProFormSelect, ProFormText, ProFormUploadButton } from '@ant-design/pro-components';

interface showModalInfo {
    data: Record<any, any> | null;
    open: boolean;
    allowLeader: boolean | undefined;
    roleData: any;
    allLeaderData: any
    onOpenChange?: Function;
    onFinish?: Function;
}

// 在函数顶部添加类型声明
interface RoleListResponse {
    data: any[];
}

function UserInfoForm({ data, open = false, allowLeader = false, roleData, allLeaderData, onOpenChange, onFinish }: showModalInfo) {
    const [avatar, setAvatar] = useState<string | undefined>(data?.avator);
    

    const formItemLayout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 14 },
    };

    return (
        <ModalForm
            title="用户信息"
            open={open}
            layout="horizontal"
            {...formItemLayout}
            onOpenChange={(open) => onOpenChange?.(open)}
            modalProps={{
                destroyOnClose: true,
                maskClosable: false
            }}
            onFinish={async (values) => {                
                // 发送接口请求
                if (onFinish) {
                    onFinish({
                        crewId:data?.id,
                        leaderId: values.leaders
                    });
                }
                return true;
            }}

            initialValues={data || undefined}
        >
            <ProFormText
                name="userName"
                label="账号"
                placeholder="请输入英文账号"
                disabled
                fieldProps={{
                    prefix: <UserOutlined />,
                }}
            />

            <ProFormText
                name="nickName"
                label="姓名"
                placeholder="请输入真实姓名"
                disabled
            />

            <ProFormText
                name="email"
                label="电子邮箱"
                placeholder="请输入工作邮箱"
                disabled
                // rules={[
                //     { required: true, message: '邮箱为必填项' },
                //     { type: 'email', message: '邮箱格式不正确' }
                // ]}
                fieldProps={{
                    prefix: <MailOutlined />,
                }}
            />

            <ProFormText
                name="phone"
                label="手机号码"
                placeholder="请输入11位手机号"
                disabled
                // rules={[
                //     { required: true, message: '手机号为必填项' },
                //     { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }
                // ]}
                fieldProps={{
                    prefix: <PhoneOutlined />,
                    maxLength: 11
                }}
            />

            <ProFormSelect
                name="roleDescriptions"
                label="角色"
                valueEnum={roleData?.reduce((acc:any, curr:any) => {
                    acc[curr.value] = { text: curr.label, status: 'Default' };
                    return acc;
                }, {} as Record<number, { text: string; status: string }>)}
                fieldProps={{
                    mode: 'multiple',
                }}
                placeholder="请选择角色信息"
                // rules={[
                //     {
                //         required: true,
                //         message: 'Please select your favorite colors!',
                //         type: 'array',
                //     },
                // ]}
                disabled
            />

            <ProFormSelect
                name="leaders"
                label="直属上级"
                fieldProps={{
                    mode: 'multiple',
                }}
                // allLeaderData 获取所有组长信息
                request={async () => allLeaderData}
                placeholder="请选择上级负责人"
                rules={[{ required: true, message: '请选择上级负责人' }]}
                // 当前用户为组员 就不开放 编辑权限
                disabled={allowLeader}
            />
        </ModalForm>
    );
};

export default UserInfoForm;